<template>
	<div class="bodyDiv">

		<div align="center" style="margin:0 auto; margin-top:5px" class="autowith">
			<img :src="'https://tp5.blver.cn'+classlist[0].goods_image" mode="widthFix"></div>

		<div style="clear:both; height:10px"></div>

		<view class="weui-tab">
			<view class="weui-navbar fixed">
				<block v-for="(item,index) in tabs" class='navr'>
					<view :id="index" class="weui-navbar__item " :class="activeIndex == index ? 'weui-bar__item_on' : ''" @click="tabClick">
						<view class="weui-navbar__title">{{item}}</view>
					</view>
				</block>
				<view class="weui-navbar__slider" :style="'left: '+sliderLeft+'px; transform: translateX('+sliderOffset+'px);'"></view>
			</view>

			<view class="weui-tab__panel">
				<view class="weui-tab__content" v-if="activeIndex == 0">

					<div class="line1"></div>
					<div class="pro_con_div" style="margin-top:5px;margin-bottom:5px">
						<div class="proname" style="width:60%">
							名称：{{classlist[0].goods_title}} </div>

						<div class="proprice" style="width:60%">
							价格： ¥
							<span id="p1" style="font-weight:600;  text-decoration:line-through">{{classlist[0].market_price}}元</span> </div>
						<div class="prohyj" style=" width:40%;color:#F00;font-weight:600; font-size:14px;">
							<div class="zhe"></div> ¥
							<span id="p2">{{classlist[0].selling_price}}</span>元</div>

					</div>

					<div class="pro_con_div">
						<div class="line2" style="margin-bottom:8px; margin-top:8px;"></div>
						<!--div class="con_title">类别：</div>
            <div class="con_con">    <a href='category.php?c_id=101' target="_blank" style="color:#777;">按用途选购</a> &gt;
    <a href='category.php?c_id=124' target="_blank" style="color:#777;">爱情</a> &gt;
一生一世</div-->
						<div class="con_title">花语：</div>
						<div class="con_con">{{classlist[0].goods_huayu}}</div>
						<div class="con_title">材料：</div>
						<div class="con_con">{{classlist[0].goods_cailiao}} </div>
						<div class="con_title">包装：</div>
						<div class="con_con">{{classlist[0].goods_baozhuang}} </div>
						<div class="con_title">附送：</div>
						<div class="con_con">{{classlist[0].goods_fusong}} </div>
						<div class="con_title">配送：</div>
						<div class="con_con">{{classlist[0].goods_peisong}}</div>
						<!--div class="con_title">购买：</div>
            <div class="con_con">26021次</div-->
					</div>
					<div style=" clear:both"></div>
					<div class="zixunDiv">
						<div class="line2"></div>
						<div style="padding-top:10px; padding-bottom:10px; color:#F00">
							<div style="float:left; width:60%; line-height:28px;">
								咨询热线：
								<a href="tel:400-9639-022" onclick="keywordscount('tel');" target="_blank" style="color:#555">400-9639-022</a>
							</div>

							<button open-type="contact" :session-from="fxsid" style=" ">
					联系客服
				</button>

							<div style=" clear:both"></div>
						</div>
						<div class="line2"></div>
						<div style=" clear:both"></div>
					</div>

					<div id="info_body" v-html="content" class="imginfo autowith">

					</div>
					<img src="../../../static/img/frod.jpg" mode="widthFix" class="ad" />
				</view>
				<view class="weui-tab__content" v-if="activeIndex == 1">
					
					<view class="weui-panel__bd">
					<div v-for="(i,index) in commentlist" class="commentlist">
						<navigator url="" class="weui-media-box npdd weui-media-box_appmsg" hover-class="weui-cell_active">
							<view class="weui-media-box__hd weui-media-box__hd_in-appmsg avak">
								<image class="weui-media-box__thumb ava" :src="i.avatarurl " />
							</view>
							<view class="weui-media-box__bd weui-media-box__bd_in-appmsg ">
								<view class="weui-media-box__desc author3">{{i.nickname}}</view>
								<view class="weui-media-box__title">{{i.content}}</view>
<view class="weui-media-box__desc time2">{{i.time}}</view>
							</view>
							
						</navigator>
						

						
					</div>

				</view>
					
					
					
				</view>

			</view>

		</view>
	
		<div class="shadow" v-if="isbuy">

			<div class="confirmbuy">
				<i class="iconfont close" @click="close()">&#xe65d;</i>
				<div class="flexs " style="align-items: baseline;">

					<img :src="'https://tp5.blver.cn'+classlist[0].goods_image" mode="widthFix" class="goodsimage">

					<div>
						{{classlist[0].goods_title}}
						<span>￥{{classlist[0].selling_price}}</span>
					</div>
				</div>

				<div class="flexs buynum">
					<div>购买数量:</div>
					<div class="select-self-area flexs">
						<span class="input-sub" @click="editCart('minu')">-</span>
						<input type="text" v-model="quantity" class="count" />
						<span class="input-sub" @click="editCart('add')">+</span>
					</div>
				</div>
				<div @click="buyflw(classlist[0])" class="buyflw">确定</div>
			</div>

		</div>

		

		<div class="bottom_float_div pf row" style="z-index:100">

			<button open-type="contact" :session-from="fxsid" class="collection column" style="float:left;display: flex; justify-content: flex-start;">

				联系客服

			</button>
			<div class="buyNow gw1" style=" float:left">
				<a style="color:#fff;">
					<div @click="nowbuy()">立即购买</div>
				</a>
			</div>
		</div>

	</div>
</template>

<script>
	import { requests } from "../../../static/js/network"
	export default {
		data() {
			return {
				classlist: '',
				content: '',
				quantity: 1,
				isbuy: false,
				fxsid: '',
				tabs: ["详情", "评论"],
				activeIndex: 0,
				sliderOffset: 0,
				sliderLeft: 32,
				commentlist:[]
			}
		},

		methods: {
			tabClick(e) {
				let self = this
				this.noscroll = true
				this.page = 1
				this.sliderOffset = e.currentTarget.offsetLeft
				this.activeIndex = e.currentTarget.id
				
				if(this.activeIndex==1){
					requests({
						url: 'https://tp5.blver.cn/api/wechat/listpinglun',
						method: 'POST',
						header: {
							'content-type': 'application/json',
							'content-type': 'application/x-www-form-urlencoded' // 默认值
						},
						data: {
							goods_id: self.classlist[0].id,
						
	
							session3rd: wx.getStorageSync('userinfo').session3rd
						},
						success: function(res) {
							console.log(res)
							self.commentlist=res.data
	
						}
					})
				}
			},
			close() {
				this.isbuy = false
			},
			nowbuy() {
				this.isbuy = true
			},
			editCart(math) {
				if(math == 'minu') {
					if(this.quantity <= 1) return
					this.quantity--
				} else {
					this.quantity++
				}
			},
			buyflw(obj) {

				if(!wx.getStorageSync('userinfo').session3rd) {
					wx.showToast({
						title: '请先登陆',
						icon: 'none',
						duration: 2000
					})
					this.$store.dispatch('whichse', 2)
					wx.reLaunch({
						url: "/pages/index/main"
					})
					return
				}

				let self = this

				let obj2 = obj
				var key = "number";

				obj2[key] = self.quantity

				this.$store.dispatch('seleflw', obj)
				wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面
					url: "/pages/orderbuy/main?num=" + self.quantity
				})
			}
		},
		onLoad() {
			this.fxsid = wx.getStorageSync('fxsid')
			let self = this
			requests({
				url: 'https://tp5.blver.cn/api/goods/getGoodsInfoData?id=' + this.$root.$mp.query.id,

				header: {
					'content-type': 'application/json' // 默认值
				},
				success: function(res) {
					console.log(res)
					self.classlist = res.data.msg

					self.content = self.classlist[0].goods_content.replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/\<img/gi, '<img style="width:100%;height:auto" ')
				}
			})
		}
	}
</script>

<style>
	.weui-tab{margin-bottom: 50rpx;}
	.ad {
		width: 100%;
	}
	
	.buynum {
		justify-content: space-between;
	}
	
	.input-sub {
		background: #f44;
		padding: 7rpx 15rpx;
		display: inline-block;
		color: #fff;
	}
	
	.count {
		width: 50rpx;
		text-align: center;
		padding: 0 0rpx;
		margin: 0 10rpx;
	}
	
	.close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	
	.goodsimage {
		width: 33%;
	}
	
	.flexs {
		display: flex;
		margin: 10rpx 20rpx;
		font-size: 28rpx;
		align-items: center;
	}
	.weui-media-box__title {
		font-size: 13px;
		margin: 5rpx 0;
		overflow: overlay;
		white-space: normal
	}
	.avak{width:30px;}
	.shadow {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 101;
	}
	.author3 {
		color: #FB9C0C;
		display: block;
	}
	.confirmbuy {
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	.buyflw {
		width: 100%;
		background: #f44;
		text-align: center;
		color: #fff;
		height: 74rpx;
	}
	
	.pf {
		position: fixed
	}
	
	.bottom_float_div {
		width: 100%;
		text-align: center;
		bottom: 0;
		background: #fff;
		left: 0;
		right: 0;
		max-width: 620px;
		margin: 0 auto
	}
	
	.row {
		flex-direction: row;
		display: flex
	}
	
	.pf {
		position: fixed
	}
	
	.collection {
		width: 50%;
		color: #999;
		border-top: 1px #cacaca solid
	}
	
	.buyNow {
		width: 50%;
		width: 100%;
		line-height: 45px;
		background-color: #f44;
		color: #fff
	}
	
	button {
		border: none;
		background: none;
	}
	
	button:after {
		border: none;
	}
	
	.collection img {
		width: 24px;
		height: 24px;
		display: block;
		margin: 0 auto;
		margin-top: 0;
		margin-top: 5px
	}
	
	.pinglunul {
		margin: 0;
		padding: 0
	}
	
	.pinglunul li {
		border-bottom: 1px #ccc solid;
		margin-top: 10px
	}
	
	.autowith image {
		width: 100%
	}
	.ava {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}
	.pinglunul li .title {
		height: 30px;
		line-height: 30px;
		clear: both;
		float: left;
		color: #666;
		font-size: 14px
	}
	
	.pinglunul li .title .tt {
		color: #999;
		font-size: 13px
	}
	
	.pinglunul li .content {
		line-height: 20px;
		clear: both;
		color: #999;
		font-size: 14px
	}
	
	.pinglunul li .bottom {
		margin-bottom: 10px;
		clear: both
	}
	
	.line1 {
		width: 100%;
		height: 2px;
		background-color: #EEE;
		clear: both;
		margin: 0 auto
	}
	
	.line2 {
		width: 100%;
		height: 1px;
		background-color: #CCC;
		clear: both;
		margin: 0 auto
	}
	
	.newProText {
		width: 95%;
		margin: 0 auto;
		margin-top: 5px;
		margin-bottom: 5px;
		clear: both
	}
	
	.newProText .left {
		width: 65%;
		float: left;
		border-right: 1px #CCC solid
	}
	
	.newProText .left .proname {
		font-size: 16px;
		line-height: 35px
	}
	
	.newProText .left .proid {
		font-size: 13px
	}
	
	.newProText .left .price {
		font-size: 17px;
		font-weight: 600;
		line-height: 35px
	}
	
	.newProText .left .price_1 {
		color: #999
	}
	
	.newProText .left .price_2 {
		color: red;
		padding-left: 50px;
		background: url(http://i.sweethua.com/m/Tpl/default/Public/2015images/zhe_ico.png) 20px 3px no-repeat;
		background-size: 30px
	}
	
	.newProText .right {
		float: right;
		width: 30%;
		text-align: center
	}
	
	.pro_con_div .zhe {
		width: 40px;
		height: 30px;
		float: left;
		background: url(http://i.sweethua.com/m/Tpl/default/Public/2015images/zhe_ico.png) no-repeat;
		background-size: 30px
	}
	
	.chicunDiv {
		width: 95%;
		margin: 0 auto;
		margin-top: 5px
	}
	
	.chicunDiv .title {
		font-size: 16px;
		line-height: 30px;
		color: red
	}
	
	.chicunul ul li {
		width: 48%;
		border: 1px #CCC solid;
		margin-top: 8px;
		border-radius: 3px;
		font-size: 12px
	}
	
	.chicunul ul li div {
		padding: 5px 5px 5px 5px
	}
	
	.chicunul ul .l {
		float: left
	}
	
	.chicunul ul .r {
		float: right
	}
	
	.chicunul ul .on {
		border: 1px red solid;
		background: url(http://i.sweethua.com/m/Tpl/default/Public/2015images/chicun_onbg.png) right bottom no-repeat;
		background-size: 20px
	}
	
	.zixunDiv {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
		clear: both;
		color: #777
	}
	
	.proImgdiv {
		width: 95%;
		margin: 0 auto
	}
	
	.proImgdiv .title {
		float: left;
		font-size: 16px;
		line-height: 30px;
		color: red
	}
	
	.proImgdiv .ico {
		float: right
	}
	
	.pro_con_div {
		line-height: 25px;
		width: 95%;
		margin: 0 auto;
		color: #777;
		font-family: 微软雅黑
	}
	
	.pro_con_div .proname {
		font-size: 15px;
		width: 50%;
		float: left;
		color: #222
	}
	
	.pro_con_div .proid {
		font-size: 15px;
		width: 50%;
		float: left;
		color: #222
	}
	
	.pro_con_div .proprice {
		font-size: 15px;
		width: 50%;
		float: left;
		color: #222;
		clear: both
	}
	
	.pro_con_div .prohyj {
		font-size: 15px;
		width: 50%;
		float: left;
		color: red
	}
	
	.pro_con_div .con_title {
		width: 20%;
		font-size: 15px;
		float: left
	}
	
	.pro_con_div .con_con {
		width: 80%;
		font-size: 15px;
		float: left
	}
	
	.weui-navbar__title {
		color: #FF5151
	}
	
	.weui-navbar__slider {
		background: #FF5151;
	}
	.commentlist {
		border-bottom: 1rpx solid #F7F7F7;
		margin: 20rpx 0;
		padding-bottom: 20rpx;
	}
	
	.time2 {
		
		margin-top: 20rpx;
	}
</style>